<template>
  <div bg-white>
    <uNavbar>
      <div text-black text-28rpx font-bold text-center w-80vw>{{ storeDetail.storeName }} </div>
    </uNavbar>
    <div v-if="isShow">
      <div px-16rpx>
        <storeBase :res="storeDetail" />
      </div>
      <scroll-view v-if="couponList.length" class="discount" bg-warmGray-100 :show-scrollbar="false" scroll-x>
        <div flex>
          <couponMini v-for="(item, index) in couponList" :key="index" :res="item" />
        </div>
      </scroll-view>
      <!-- <div h-90rpx text-center rounded bg-warmGray-200 my-20rpx line-height-90rpx>
        联系客服
      </div> -->
      <div v-if="isPageShow">
        <div v-for="(item, index) in pageData" :key="index">
          <tpl_goods v-if="item.type === 'goodsOnly'" :res="item" />
          <tpl_block v-if="item.type === 'whiteSpace'" :res="item" />
          <tpl_banner v-if="item.type === 'carousel'" :res="item" />
          <tpl_search v-if="item.type === 'search'" :res="item" />
          <tpl_menu v-if="item.type === 'menu'" :res="item" />
          <tpl_flex_one v-if="item.type === 'flexOne'" :res="item" />
          <tpl_left_one_right_two v-if="item.type === 'leftOneRightTwo'" :res="item" />
          <tpl_left_two_right_one v-if="item.type === 'leftTwoRightOne'" :res="item" />
          <tpl_flex_two v-if="item.type === 'flexTwo'" :res="item" />
          <tpl_flex_three v-if="item.type === 'flexThree'" :res="item" />
          <tpl_flex_five v-if="item.type === 'flexFive'" :res="item" />
          <tpl_flex_four v-if="item.type === 'flexFour'" :res="item" />
          <tpl_hot_zone v-if="item.type === 'flexHotArea'" :res="item" />

        </div>
      </div>
      <nut-tabs v-if="!isPageShow" v-model="currentTab" background="#fff" type="smile">
        <nut-tab-pane custom-class="custom-tabpane-white" title="全部商品">
          <div flex flex-wrap>
            <div bg-white v-if="goodsData && goodsData?.list.length" :style="'width: 50%'"
              v-for="(item, index) in goodsData.list" :key="index">
              <twoRow :res="item" />
            </div>
            <empty mt-100rpx v-else />
          </div>
        </nut-tab-pane>
        <nut-tab-pane custom-class="custom-tabpane-white" title="分类">
          <div>
            <category :id="routerVal.id" />
          </div>
        </nut-tab-pane>
      </nut-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getGoodsList, getStoreDetail } from '@/api/goods';
import { getFloorStoreData } from '@/api/home';
import { getAllCoupons } from '@/api/promotion';
import empty from '@/components/empty/index.vue';
import couponMini from '@/pages/goods/store/template/coupon-mini.vue';
import tpl_banner from "@/pages/v3-template/tpl_banner.vue"; //轮播图
import tpl_block from "@/pages/v3-template/tpl_block.vue"; //空白
import tpl_flex_five from "@/pages/v3-template/tpl_flex_five.vue";
import tpl_flex_four from "@/pages/v3-template/tpl_flex_four.vue";
import tpl_flex_one from "@/pages/v3-template/tpl_flex_one.vue"; //图片
import tpl_flex_three from "@/pages/v3-template/tpl_flex_three.vue";
import tpl_flex_two from "@/pages/v3-template/tpl_flex_two.vue";
import tpl_goods from "@/pages/v3-template/tpl_goods.vue";
import tpl_hot_zone from "@/pages/v3-template/tpl_hot_zone.vue";
import tpl_left_one_right_two from "@/pages/v3-template/tpl_left_one_right_two.vue";
import tpl_left_two_right_one from "@/pages/v3-template/tpl_left_two_right_one.vue";
import tpl_menu from "@/pages/v3-template/tpl_menu.vue"; //菜单
import tpl_search from "@/pages/v3-template/tpl_search.vue"; //搜索栏

import twoRow from '@/components/goods-list/2row.vue';
import { back } from '@/components/goods-list/common';
import storeBase from '@/pages/goods/store/template/base.vue';
import category from '@/pages/goods/store/template/category.vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import uNavbar from '@/components/navbar/index.vue'
interface PageRule {
  pageNumber: number,
  pageSize: number
  [key: string]: any
}
const isShow = ref<boolean>(false)
const isPageShow = ref<boolean>(false) //是否是楼层装修
const routerVal = ref<any>({})
const storeDetail = ref<any>({})
const currentTab = ref(0)
const couponList = ref<any>([])
const goodsData = ref<any>({
  list: []
})
const goodsParams = ref<PageRule>({
  pageNumber: 1,
  pageSize: 10,
  storeId: "",
})
const pageData = ref<any>('')

function search() {

}

async function init() {
  const res = await getStoreDetail(routerVal.value.id)
  isShow.value = true
  if (res.data.success) {
    storeDetail.value = res.data.result
    fetchStoreCoupon()
    if (res.data.result.pageShow == '1') {
      isPageShow.value = true
      initPageData()

    } else {
      fetchStoreGoods()

    }
  }
}
// 楼层装修
async function initPageData() {
  pageData.value = ""
  const res = await getFloorStoreData({
    pageType: "STORE",
    num: routerVal.value.id,
  })
  if (res.data.success) {
    const foolData = res.data.result.pageData ? JSON.parse(res.data.result.pageData) : ''
    if (foolData.version && foolData.data.length) {
      foolData.data.forEach((element: any) => {
        if (element.data.list && element.data.list.length) {
          element.data.list.forEach((list: any) => {
            list.other = {}
            list.other.pageType = 'STORE'
            list.other.id = routerVal.value.id
          })
        }
      });
      pageData.value = foolData.data

      // 说明是新版楼层装修的内容
    }

  }
}

// 获取店铺商品
async function fetchStoreGoods() {
  goodsParams.value.storeId = routerVal.value.id
  const res = await getGoodsList(goodsParams.value)
  if (res.data.success) {
    goodsData.value.list.push(...res.data.result.records)
    goodsData.value.total = res.data.result.total
  }
}

// 获取店铺优惠券
async function fetchStoreCoupon() {
  const params = {
    pageNumber: 1,
    pageSize: 50,
    storeId: routerVal.value.id,
  }
  let res = await getAllCoupons(params);
  if (res.data.success) {
    couponList.value.push(...res.data.result.records);

  }
}

onReachBottom(() => {
  console.log(goodsData.value.list?.total > goodsParams.value.pageNumber * goodsParams.value.pageSize)
  if (goodsData.value?.total > goodsParams.value.pageNumber * goodsParams.value.pageSize) {
    goodsParams.value.pageNumber++

    fetchStoreGoods()
  }
})

onLoad((options: any) => {
  if (options.scene) {
    const scene = decodeURIComponent(options.scene)
    options.id = scene
  }
  routerVal.value = options
  init()
})
onMounted(() => {

});
</script>
<style scoped>
page,
:root {
  background: #fff;
}
</style>
<style scoped lang="scss">
.custom-tabpane {
  background: #f8f8f8 !important;

  &-white {
    padding: 0 !important;
    background: #fff !important;
  }
}

.discount {
  height: 154rpx;
  border-top: 1px solid #f6f6f6;
  background: #f6f6f6;
  overflow: hidden;
  white-space: nowrap;
}
</style>
